
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>商户管理中心</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="{$site_url}/game/payx/mabi/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{$site_url}/game/payx/mabi/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="{$site_url}/game/payx/mabi/css/ionicons.min.css">
  <!-- fullCalendar 2.2.5-->
  <link rel="stylesheet" href="{$site_url}/game/payx/mabi/css/fullcalendar.min.css">
  <link rel="stylesheet" href="{$site_url}/game/payx/mabi/css/fullcalendar.print.css" media="print">
  <!-- Theme style -->
  <link rel="stylesheet" href="{$site_url}/game/payx/mabi/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="{$site_url}/game/payx/mabi/css/_all-skins.min.css">
  <link rel="stylesheet" href="{$site_url}/game/payx/mabi/css/all.css">

  <!-- jQuery 2.2.3 -->
  <script src="{$site_url}/game/payx/mabi/js/jquery-2.2.3.min.js"></script>
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <link rel="stylesheet" href="{$site_url}/game/payx/mabi/css/layui.css">
  <script src="{$site_url}/game/payx/mabi/js/layui.js"></script>
<script>
  //一般直接写在一个js文件中
  layui.use(['layer', 'form'], function(){
    var layer = layui.layer
    ,form = layui.form;
    
  });
  </script> 
  <style>
    form.layui-form-item,form.layui-form *{ font-size: 12px;}
  .layui-form-pane .layui-form-label{ width: auto;border-radius: 0;
    padding: 0 6px;
    height: 32px;
    line-height: 30px;}
  .layui-form-item .layui-input-inline{ width: 170px;}
  .layui-input-inline input, .layui-input-inline select{
    border-radius: 0;
    padding: 0 5px;
    height: 32px;
    line-height: 30px;
    width: 100%;
  }
  .layui-btn{height: 32px;
    line-height: 30px;
    font-size: 12px;
    padding: 0 10px;}
    .layui-form-item{ margin-bottom: 10px;}
  </style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <header class="main-header">
    <!-- Logo -->
    <a href="#" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><b>P</b>AY</span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg"><b>商户</b>中心</span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          
          <!-- User Account: style can be found in dropdown.less -->
          <li class="dropdown user user-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="{$site_url}/game/payx/mabi/img/user2-160x160.jpg" class="user-image" alt="User Image">
              <span class="hidden-xs">hoba123</span>
            </a>
            <ul class="dropdown-menu">
              <!-- User image -->
              <li class="user-header">
                <img src="{$site_url}/game/payx/mabi/img/user2-160x160.jpg" class="img-circle" alt="User Image">

                <p>
                    10225                  <small>hoba123</small>
                </p>
              </li>
              <!-- Menu Body -->
              <li class="user-body" style="display: none;">
                <div class="row">
                  <div class="col-xs-4 text-center">
                    <a href="#">Followers</a>
                  </div>
                  <div class="col-xs-4 text-center">
                    <a href="#">Sales</a>
                  </div>
                  <div class="col-xs-4 text-center">
                    <a href="#">Friends</a>
                  </div>
                </div>
                <!-- /.row -->
              </li>
              <!-- Menu Footer-->
              <li class="user-footer">
                <div class="pull-left">
                  <a href="/merchant/index/changepassword.html" class="btn btn-default btn-flat">修改密码</a>
                </div>
                <div class="pull-right">
                  <a href="/merchant/login/out" class="btn btn-default btn-flat">退出</a>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- Sidebar user panel -->
      <div class="user-panel">
        <div class="pull-left image">
          <img src="{$site_url}/game/payx/mabi/img/user2-160x160.jpg" class="img-circle" alt="User Image">
        </div>
        <div class="pull-left info">
          <p>hoba123</p>
          <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
        </div>
      </div>
      <!-- search form -->
      <!-- <form action="#" method="get" class="sidebar-form">
        <div class="input-group">
          <input type="text" name="q" class="form-control" placeholder="Search...">
              <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
              </span>
        </div>
      </form> -->
      <!-- /.search form -->
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu">
        <li class="header">主导航</li>
        
        <!-- <li class="treeview">
          <a href="#">
            <i class="fa fa-files-o"></i>
            <span>订单管理</span>
            <span class="pull-right-container">
              <span class="label label-primary pull-right">4</span>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="/merchant/orders/index"><i class="fa fa-circle-o"></i> 订单</a></li>
            <li><a href="#"><i class="fa fa-circle-o"></i> 账单</a></li>
            <li><a href="#"><i class="fa fa-circle-o"></i> 角色管理</a></li>
            
          </ul>
        </li> -->
        
        <li><a href="/merchant/index/index"><i class="fa fa-gear"></i> <span>管理中心 </span></a></li>
        
        <li><a href="/merchant/product/index"><i class="fa fa-gear"></i> <span>产品管理 </span></a></li>
        
        <li><a href="/merchant/businessaccount/index?type=1"><i class="fa fa-gear"></i> <span>支付宝管理 </span></a></li>
        
        <li><a href="/merchant/businessaccount/index?type=2"><i class="fa fa-gear"></i> <span>微信管理 </span></a></li>
        
        <li><a href="/merchant/orders/index"><i class="fa fa-gear"></i> <span>订单管理 </span></a></li>
        
        <li><a href="/merchant/ordersmiss/index"><i class="fa fa-gear"></i> <span>掉单管理 </span></a></li>
        
        <li><a href="/merchant/businessstatistics/index"><i class="fa fa-gear"></i> <span>订单统计 </span></a></li>
        
        <li><a href="/merchant/businessrecharge/index"><i class="fa fa-gear"></i> <span>充值 </span></a></li>
        
        <li><a href="/merchant/index/changepassword"><i class="fa fa-gear"></i> <span>修改密码 </span></a></li>
                
        
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        二维码批量上传 <small>金额自动识别</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"></a><i class="fa fa-dashboard"></i> 首页</a></li>
              </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <link rel="stylesheet" type="text/css" href="{$site_url}/game/payx/mabi/css/webuploader.css">
<script type="text/javascript" src="{$site_url}/game/payx/mabi/js/webuploader.js"></script>
<script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
<script type="text/javascript" src="{$site_url}/game/payx/mabi/js/ocrad.js"></script>
<script type="text/javascript" src="{$site_url}/game/payx/mabi/js/llqrcode.js"></script>

<div class="row">
    <div class="col-xs-12">
      <div class="box">
        <div class="box-header">
          <h3 class="box-title">w13794045838 - 批量上传二维码 <span style='color: red'>请先选择产品再上传图片</span></h3>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">产品：</label>
            <div class="layui-input-inline">
                <select name="product_id" id="product_id" >
                    <option value="">请选择</option>
                     
                    <option value="294" selected>10</option>
                     
                    <option value="297" >20</option>
                     
                    <option value="298" >50</option>
                     
                    <option value="299" >100</option>
                     
                    <option value="300" >200</option>
                     
                    <option value="523" >300</option>
                     
                    <option value="524" >1000</option>
                     
                    <option value="525" >0</option>
                                    </select>
            </div>
        </div>
        <div class="box-body table-responsive no-padding" >
            <div class="col-md-2">
                <!-- <span class="btn btn-success autoMoney">电脑识别</span> -->
                <span class="btn btn-success MobileautoMoney">手机识别</span>
            </div>
            <span class="btn" id="removeAll" style="float: right"> 全部清空	</span>
            <span class="btn" id="removeFaild" style="float: right">清除异常</span>
            <div style="clear: both"></div>
            <div id="uploader" class="wu-example">
                <div class="queueList">
                    <div id="dndArea" class="placeholder">
                        <div id="filePicker"></div>
                        <p>或将照片拖到这里，单次最多可选300张</p>
                    </div>
                </div>
                <div class="statusBar" style="display:none;">
                    <div class="progress">
                        <span class="text">0%</span>
                        <span class="percentage"></span>
                    </div><div class="info"></div>
                    <div class="btns">
                        <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                    </div>
                </div>
            </div>
            

</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>



<div style="display: none">
        <canvas id="decode-canvas">Sorry, your browser dose not support canvas.</canvas>
        </div>


<script>

$('#product_id').change(function(){
    window.location.href = '/merchant/businesscode/save.html?account_id='+254+'&product_id='+$(this).children('option:selected').val();
})


    var getQueryString=function (str,name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    str= str.replace(/%26/g, "&");
    str= str.replace(/%3D/ig, "=");
    var r = str.match(reg);
    if (r != null) {
        return r[2];
    }
    return '';
}
var qrcode_decode = function (src,callback,data) {
    var image = new Image();
    image.crossOrigin = "Anonymous";
    image.onload = function () {
        if(!window.qrcode)return  callback('not find qrcode',null);
        /**var canvas_qr = document.getElementById("qr-canvas");*/
        var canvas_out = document.getElementById("out-canvas");
        if (canvas_out != null) {
            var outctx = canvas_out.getContext('2d');
            outctx.clearRect(0, 0, 320, 240);
            outctx.drawImage(image, 0, 0, 320, 240);
        }

        var canvas_qr = document.createElement('canvas');
        var context = canvas_qr.getContext('2d');
        var nheight = image.height;
        var nwidth = image.width;
        // qrcode.maxImgSize=2000*2000;
        if (image.width * image.height > qrcode.maxImgSize) {
            var ir = image.width / image.height;
            nheight = Math.sqrt(qrcode.maxImgSize / ir);
            nwidth = ir * nheight;
        }
        canvas_qr.width = nwidth;
        canvas_qr.height = nheight;

        context.drawImage(image, 0, 0, canvas_qr.width, canvas_qr.height);
        qrcode.width = canvas_qr.width;
        qrcode.height = canvas_qr.height;
        qrcode.imagedata = context.getImageData(0, 0, canvas_qr.width, canvas_qr.height);
        var result='';
        try {
            result = qrcode.process(context);
        }catch (e) {
        }

        if(!result||(data&&data.show)){
            // document.body.appendChild(canvas_qr);
            var findQr=findQrcode({
                type: 'findQrcode',
                x: 10,
                y: 10,
                nextX: 8,
                scale: 1,
                imageData: qrcode.imagedata,
                width: canvas_qr.width,
                height: canvas_qr.height
            });
            if(!findQr.error){

                qrcode.imagedata= context.getImageData( findQr.x-10, findQr.y-10, findQr.width + 20, findQr.width + 20);
                qrcode.width = canvas_qr.width = findQr.width+20;
                qrcode.height= canvas_qr.height = findQr.width+20;

                if(!result){
                    try {
                        result = qrcode.process(context);
                    }catch (e) {

                    }
                }

            }

            if(data&&data.show){
                // context.clearRect(0, 0, canvas_qr.width,  canvas_qr.height);
                // context.putImageData(qrcode.imagedata,0,0);
                data.show=qrcode.imagedata;
                // var imgBase64=canvas_qr.toDataURL("image/png");
                // data.show.attr('src',"data:application/octet-stream;" +imgBase64.substr(imgBase64.indexOf("base64,")));
            }
        }
        if(!result){
            var qr = new QRDecode();
            try {
                result = qr.decodeImageData(qrcode.imagedata, qrcode.width, qrcode.height);
            }catch (e){

            }
            qr=null;
        }
        image=null;
        canvas_out=null;
        context=null;
        return callback(null,result&&data&&data.encode?encodeURIComponent(result):result);
    }
    image.onerror = function () {
        callback('Failed to load the image',null);
    }
    image.src  = "data:application/octet-stream;" +src.substr(src.indexOf("base64,"));
    src=null;
}
var isCanvasSupported=function () {
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
}
var isCanDecode=function(){
    try{
       if(window.File && window.FileReader && isCanvasSupported()){
           return true;
       }else{
           return false;
       }
    }catch (e){
        return false;
    }
}
function getMyRGB(data, x, y, width, sum) {
    var p = x * 4 + y * width * 4;
    return sum ? (data[p] + data[p + 1] + data[p + 2]) :typeof sum=='number'?(data[p]==data[p+2]&&data[p]<=data[p+2]+5&&data[p]>=data[p+2]-5):[data[p], data[p + 1], data[p + 2]];
}
function getRGB(data, x, y, width) {
    var p = x * 4 + y * width * 4;
    return [data[p], data[p + 1], data[p + 2]];
}
function findQrcode(data) {
    var findBlack = function (x, y) {
        return getMyRGB(data.imageData.data, x, y, data.width, true) < 5 ? true : false;
    }, saveY, saveX, width = 0;
    var startX = data.x || 0;
    var startY = data.y || 0;
    var nextX = data.nextX || 1;
    var scale=data.scale||1;
    var maxHeight=parseInt(data.height);
    var maxWidth=parseInt(data.width);
    for (var x = startX; x < maxWidth; x++) {
        for (var y = startY; y < maxHeight; y++) {
            if (findBlack(x, y) && findBlack(x , y+nextX)) {
                for (var rightX = data.width; rightX > (x + 21); rightX--) {
                    if (findBlack(rightX, y) && findBlack((rightX - nextX), y)) {
                        saveY = y;
                        saveX = x;
                        width = rightX - x;
                        return {x: saveX, y: saveY, width: width,scale:scale};
                    }
                }
                if (width)break;
            } else if (width) {
                break;
            }
        }
        if (width) {
            break;
        }
    }
    return {x: saveX, y: saveY,scale:scale, width: width,error:'没找到'};
}
function errmsg(title, msg) {
    try{
        swal(title, msg, "error")
    }catch (e){
        layui.use('layer',function () {
                layer.msg(msg)
        })

    }
}
</script>
<script>
var allError = '',ThreadLock=false,stopThread=false;
(function ($) {
    // 当domReady的时候开始初始化
    $(function () {
        var $wrap = $('#uploader'),
            upType = window.upType || 2,
            signCode = window.signCode || '',
            // 图片容器
            $queue = $('<ul class="filelist"></ul>')
                .appendTo($wrap.find('.queueList')),

            // 状态栏，包括进度和控制按钮
            $statusBar = $wrap.find('.statusBar'),

            // 文件总体选择信息。
            $info = $statusBar.find('.info'),

            // 上传按钮
            $upload = $wrap.find('.uploadBtn'),

            // 没选择文件之前的内容。
            $placeHolder = $wrap.find('.placeholder'),

            $progress = $statusBar.find('.progress').hide(),

            // 添加的文件数量
            fileCount = 0,

            // 添加的文件总大小
            fileSize = 0,

            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,

            // 缩略图大小
            thumbnailWidth = 400 * ratio,
            thumbnailHeight = 600 * ratio,
            // 可能有pedding, ready, uploading, confirm, done.
            state = 'pedding',

            // 所有文件的进度信息，key为file id
            percentages = {},
            // 判断浏览器是否支持图片的base64
            isSupportBase64 = (function () {
                var data = new Image();
                var support = true;
                data.onload = data.onerror = function () {
                    if (this.width != 1 || this.height != 1) {
                        support = false;
                    }
                }
                data.src = "";
                return support;
            })(),

            // 检测是否已经安装flash，检测flash的版本
            flashVersion = (function () {
                var version;

                try {
                    version = navigator.plugins['Shockwave Flash'];
                    version = version.description;
                } catch (ex) {
                    try {
                        version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
                            .GetVariable('$version');
                    } catch (ex2) {
                        version = '0.0';
                    }
                }
                version = version.match(/\d+/g);
                return parseFloat(version[0] + '.' + version[1], 10);
            })(),

            supportTransition = (function () {
                var s = document.createElement('p').style,
                    r = 'transition' in s ||
                        'WebkitTransition' in s ||
                        'MozTransition' in s ||
                        'msTransition' in s ||
                        'OTransition' in s;
                s = null;
                return r;
            })(),

            // WebUploader实例
            uploader;

        if (!WebUploader.Uploader.support('flash') && WebUploader.browser.ie) {

            // flash 安装了但是版本过低。
            if (flashVersion) {
                (function (container) {
                    window['expressinstallcallback'] = function (state) {
                        switch (state) {
                            case 'Download.Cancelled':
                                alert('您取消了更新！')
                                break;

                            case 'Download.Failed':
                                alert('安装失败')
                                break;

                            default:
                                alert('安装已成功，请刷新！');
                                break;
                        }
                        delete window['expressinstallcallback'];
                    };

                    var swf = './expressInstall.swf';
                    // insert flash object
                    var html = '<object type="application/' +
                        'x-shockwave-flash" data="' + swf + '" ';

                    if (WebUploader.browser.ie) {
                        html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';
                    }

                    html += 'width="100%" height="100%" style="outline:0">' +
                        '<param name="movie" value="' + swf + '" />' +
                        '<param name="wmode" value="transparent" />' +
                        '<param name="allowscriptaccess" value="always" />' +
                        '</object>';

                    container.html(html);

                })($wrap);

                // 压根就没有安转。
            } else {
                $wrap.html('<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img alt="get flash player" src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg" /></a>');
            }

            return;
        } else if (!WebUploader.Uploader.support()) {
            alert('Web Uploader 不支持您的浏览器！');
            return;
        }

        // 实例化
        uploader = WebUploader.create({
            pick: {
                id: '#filePicker',
                label: '点击选择图片'
            },
            formData: {
                product_id : $('#product_id').val(),
                pay_type: upType,
                account_id: '254',
                signCode: signCode
            },
            fileVal: 'img',
            dnd: '#dndArea',
            paste: '#uploader',
            swf: 'mabi/css/Uploader.swf',
            chunked: false,
            chunkSize: 512 * 1024,
            server: '/merchant/businesscode/save.html',
            // runtimeOrder: 'flash',

            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },

            // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
            disableGlobalDnd: true,
            fileNumLimit: 300,
            fileSizeLimit: 200 * 1024 * 1024,    // 200 M
            fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
        });

        // 拖拽时不接受 js, txt 文件。
        uploader.on('dndAccept', function (items) {
            var denied = false,
                len = items.length,
                i = 0,
                // 修改js类型
                unAllowed = 'text/plain;application/javascript ';

            for (; i < len; i++) {
                // 如果在列表里面
                if (~unAllowed.indexOf(items[i].type)) {
                    denied = true;
                    break;
                }
            }

            return !denied;
        });

        uploader.on('dialogOpen', function () {
            allError = '';
            //console.log('here');
        });
        uploader.on('beforeFileQueued', function (file) {
            var reg = /(jpg|jpeg|gif|bmp|png)$/i;
            if (!reg.test(file.name)) {
                errmsg('有文件格式不支持', file.name);
                return false;
            }
            return true;
        });
        uploader.on('startUpload', function (files) {

            $.each(uploader.getFiles(), function () { //将上传任务加入到队列
                var nowStatus = this.getStatus();
                if (nowStatus != 'invalid' && nowStatus != 'cancelled' && nowStatus != 'complete') {
                    this.setStatus('queued');

                }
                uploader.getData(this);

            })

        })
        uploader.on('uploadAccept', function (file, rs, cb) {
            if (!rs || rs.code !== 0) {
                cb && cb(rs.msg);
                return false;
            }
            return true;
        })
        uploader.on('uploadError', function (file, reason) {
            file.showError(reason || '上传失败请重试');
        })

        uploader.on('fileQueued', function (file) {
            if (!file.url  && window.File && window.FileReader&& isCanvasSupported()) {
                var reader = new FileReader();
                reader.onload = (function (theFile) {
                    return function (e) {
                        !file.url&&qrcode_decode(e.target.result,function (err,url) {
                            // if(url&&upType==2){
                            //     url='https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac='+getQueryString(url,'ac')+'&u='+(getQueryString(url,'u')||getQueryString(url,'y'))+'&n='+getQueryString(url,'u');
                            // }
                                // if(url&&(url.indexOf('https%3A')===0||url.indexOf('http%3A')===0))return false;

                                file.url = url;
                                file.showError(file.url)
                                window.console&&console.log('解码1',file.url);
                        },file);
                    };
                })(file.source.source);
               reader.readAsDataURL(file.source.source);
            }else {}
        });

        // 添加“添加文件”的按钮，
        uploader.addButton({
            id: '#filePicker2',
            label: '继续添加'
        });

        uploader.on('ready', function () {
            window.uploader = uploader;
        });

        // uploader.upload = function () {
        //     uploader.paused = false;
        //     setState('uploading');
        //     $.each(uploader.getFiles(), function () { //将上传任务加入到队列
        //         var nowStatus = this.getStatus();
        //         if (nowStatus != 'invalid' && nowStatus != 'cancelled' && nowStatus != 'complete') {
        //             this.setStatus('queued');
        //         }
        //     })
        //     uploader.next(0);//从第1个未成功的开始
        // }
        uploader.stop = function () {
            uploader.paused = true;
            setState('paused');
        }


        // 当有文件添加进来时执行，负责view的创建
        function addFile(file) {
            var tagInput = upType == 1 ? '<input type="number"  class="tag" placeholder="备注" min="0" max="100">' : '';
            var $li = $('<li id="' + file.id + '">' +
                '<p class="title">' + file.name + '</p>' +
                '<p class="imgWrap"></p>' +
                '<p class="progress"><span></span></p>' +
                '<p class="money">金额：<input type="number"  class="price" placeholder="金额" min="0.01" max="9999">' + tagInput + '</p>' +
                '</li>'),

                $btns = $('<div class="file-panel">' +
                    '<span class="cancel">删除</span>' +
                    '<span class="rotateRight">金额</span>' +
                    '<span class="rotateLeft">备注</span></div>').appendTo($li),
                $prgress = $li.find('p.progress span'),
                $wrap = $li.find('p.imgWrap'),
                $info2 = $('<p class="error2"></p>'),
                $info = $('<p class="error"></p>'),
                $price = $li.find('.price'),
                $tag = $li.find('.tag'),
                showError = function (code) {
                    switch (code) {
                        case 'exceed_size':
                            text = '文件大小超出';
                            break;
                        case 'interrupt':
                            text = '上传暂停';
                            break;
                        case 'noQrcode':
                            text = '无法识别的二维码';
                            return file.showError(text, 1);
                            break;
                        case 'error':
                            text = '请更换浏览器';
                            break;
                        case 'noMoney':
                            text = '金额有误 需重新输入';
                            break;
                        case 'noTag':
                            text = '备注有误 需重新输入';
                            break;
                        case 'pass':
                            text = '无法识别跳过';
                            break;
                        default:
                            text = '上传失败，请重试';
                            break;
                    }
                    file.showError(text);
                };
            $info2.appendTo($li).hide();
            $info.appendTo($li).hide();
            file.showError = function (text, act) {
                if (act) {
                    $info.text(text);
                    $info.show();
                } else {
                    $info2.text(text);
                    $info2.show();
                }
            }
            file.hideError = function () {
                $info.text('').hide();
                $info2.text('').hide();
            }
            file.setColour = function (act, Colour) {
                Colour = Colour || '#bfbfbf';
                if (act == 1) { //设置金额颜色
                    $price.css('border-color', Colour);
                } else if (act == 2) { //设置备注颜色
                    $tag.css('border-color', Colour);
                } else {
                    $price.css('border-color', Colour);
                    $tag.css('border-color', Colour);
                }
            }
            $price.on('change', function (obj) {
                var c = parseFloat(this.value) ? '#bfbfbf' : 'red';
                file.setColour(1, c);
            })
            $tag.on('change', function (obj) {
                var c = parseInt(this.value) ? '#bfbfbf' : 'red';
                file.setColour(2, c);
            })
            file.check = function () {
                var result = {"money": parseFloat($price.val()), url: (file.url || '')};
                var isOk = true;
                if (upType == 1) {
                    var nowTag = parseInt($tag.val());
                    if (isNaN(nowTag)) {
                        isOk = false;
                        file.setColour(2, 'red');
                    } else {
                        result.tag = nowTag;
                    }
                }
                if (isNaN(result.money)) {
                    file.setColour(1, 'red');
                    isOk = false;
                }
                return isOk ? result : false;
            }
            if (file.getStatus() === 'invalid') {
                showError(file.statusText);
            } else {
                // @todo lazyload
                $wrap.text('预览中');
                uploader.makeThumb(file, function (error, src) {
                    var img;

                    if (error) {
                        $wrap.text('不能预览');
                        return;
                    }

                    if (isSupportBase64) {
                        img = $('<img src="' + src + '">');
                        $wrap.empty().append(img);
                    } else {
                        $.ajax('../../server/preview.php', {
                            method: 'POST',
                            data: src,
                            dataType: 'json'
                        }).done(function (response) {
                            if (response.result) {
                                img = $('<img src="' + response.result + '">');
                                $wrap.empty().append(img);
                            } else {
                                $wrap.text("预览出错");
                            }
                        });
                    }
                }, thumbnailWidth, thumbnailHeight);

                percentages[file.id] = [file.size, 0];
                file.rotation = 0;
            }

            file.on('statuschange', function (cur, prev) {
                if (prev === 'progress') {
                    $prgress.hide().width(0);
                } else if (prev === 'queued') {
                    $li.off('mouseenter mouseleave');
                    $btns.remove();
                }

                // 成功
                if (cur === 'error' || cur === 'invalid') {

                    showError(file.statusText);
                    percentages[file.id][1] = 1;
                } else if (cur === 'interrupt') {
                    showError('interrupt');
                } else if (cur === 'queued') {
                    $info.remove();
                    $prgress.css('display', 'block');
                    percentages[file.id][1] = 0;
                } else if (cur === 'progress') {
                    $info.remove();
                    $prgress.css('display', 'block');
                } else if (cur === 'complete') {
                    $prgress.hide().width(0);
                    $li.append('<span class="success"></span>');
                }

                $li.removeClass('state-' + prev).addClass('state-' + cur);
            });

            $li.on('mouseenter', function () {
                $btns.stop().animate({height: 30});
            });

            $li.on('mouseleave', function () {
                $btns.stop().animate({height: 0});
            });

            $btns.on('click', 'span', function () {
                var index = $(this).index(),
                    deg;

                switch (index) {
                    case 0:
                        uploader.removeFile(file);
                        return;

                    case 1:
                        file.rotation += 90;
                        break;

                    case 2:
                        file.rotation -= 90;
                        break;
                }

                if (supportTransition) {
                    deg = 'rotate(' + file.rotation + 'deg)';
                    $wrap.css({
                        '-webkit-transform': deg,
                        '-mos-transform': deg,
                        '-o-transform': deg,
                        'transform': deg
                    });
                } else {
                    $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');
                    // use jquery animate to rotation
                    // $({
                    //     rotation: rotation
                    // }).animate({
                    //     rotation: file.rotation
                    // }, {
                    //     easing: 'linear',
                    //     step: function( now ) {
                    //         now = now * Math.PI / 180;

                    //         var cos = Math.cos( now ),
                    //             sin = Math.sin( now );

                    //         $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
                    //     }
                    // });
                }


            });

            $li.appendTo($queue);
        }


        // 负责view的销毁
        function removeFile(file) {
            var $li = $('#' + file.id);

            delete percentages[file.id];
            updateTotalProgress();
            $li.off().find('.file-panel').off().end().remove();
            file.setStatus('cancelled')
        }

        function updateTotalProgress() {
            var loaded = 0,
                total = 0,
                spans = $progress.children(),
                percent;

            $.each(percentages, function (k, v) {
                total += v[0];
                loaded += v[0] * v[1];
            });

            percent = total ? loaded / total : 0;


            spans.eq(0).text(Math.round(percent * 100) + '%');
            spans.eq(1).css('width', Math.round(percent * 100) + '%');
            updateStatus();
        }

        function updateStatus() {
            var text = '', stats;

            if (state === 'ready') {
                text = '选中' + fileCount + '张图片，共' +
                    WebUploader.formatSize(fileSize) + '。';
            } else if (state === 'confirm') {
                stats = uploader.getStats();
                if (stats.uploadFailNum) {
                    text = '已成功上传' + stats.successNum + '张二维码至云端，' +
                        stats.uploadFailNum + '张二维码上传失败，<a class="retry" href="javascript:void(0)">重新上传</a>失败图片或<a class="ignore" href="javascript:void(0)">忽略</a>'
                    stats.uploadFailNum + '张二维码上传失败，<a class="retry" href="javascript:void(0)">重新上传</a>失败图片或<a class="ignore" href="javascript:void(0))">忽略</a>'
                }

            } else {
                stats = uploader.getStats();
                text = '共' + fileCount + '张（' +
                    WebUploader.formatSize(fileSize) +
                    '），已上传' + stats.successNum + '张';

                if (stats.uploadFailNum) {
                    text += '，失败' + stats.uploadFailNum + '张';
                }
            }

            $info.html(text);
        }

        function setState(val) {
            var file, stats;

            if (val === state) {
                return;
            }

            $upload.removeClass('state-' + state);
            $upload.addClass('state-' + val);
            state = val;

            switch (state) {
                case 'pedding':
                    $placeHolder.removeClass('element-invisible');
                    $queue.hide();
                    $statusBar.addClass('element-invisible');
                    uploader.refresh();
                    break;

                case 'ready':
                    $placeHolder.addClass('element-invisible');
                    $('#filePicker2').removeClass('element-invisible');
                    $queue.show();
                    $statusBar.removeClass('element-invisible');
                    uploader.refresh();
                    break;

                case 'uploading':
                    $('#filePicker2').addClass('element-invisible');
                    $progress.show();
                    $upload.text('暂停上传');
                    break;

                case 'paused':
                    $progress.show();
                    $upload.text('继续上传');
                    break;

                case 'confirm':
                    $progress.hide();
                    $('#filePicker2').removeClass('element-invisible');
                    $upload.text('开始上传');

                    stats = uploader.getStats();
                    if (stats.successNum && !stats.uploadFailNum) {
                        setState('finish');
                        return;
                    }
                    break;
                case 'finish':
                    stats = uploader.getStats();
                    if (stats.successNum) {
                        layer.alert('上传成功');      
                    } else {
                        // 没有成功的图片，重设
                        state = 'done';
                        location.reload();
                    }
                    break;
            }

            updateStatus();
        }

        uploader.on('uploadBeforeSend', function (block, data) {
            // block为分块数据。

            // file为分块对应的file对象。
            var backData = block.file.check();
            if (backData) {
                for (var k in backData) data[k] = backData[k];
                // if (backData.url) block.blob.getSource = function () {
                //     return null; //已经解码直接为空
                // };
            }
            // 修改data可以控制发送哪些携带数据。

        });
        uploader.onUploadProgress = function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress span');

            $percent.css('width', percentage * 100 + '%');
            percentages[file.id][1] = percentage;
            updateTotalProgress();
        };

        uploader.onFileQueued = function (file) {
            fileCount++;
            fileSize += file.size;

            if (fileCount === 1) {
                $placeHolder.addClass('element-invisible');
                $statusBar.show();
            }

            addFile(file);
            setState('ready');
            updateTotalProgress()
        };

        uploader.onFileDequeued = function (file) {
            fileCount--;
            fileSize -= file.size;

            if (!fileCount) {
                setState('pedding');
            }

            removeFile(file);
            updateTotalProgress();

        };

        uploader.on('all', function (type) {
            var stats;
            switch (type) {
                case 'uploadFinished':
                    setState('confirm');
                    break;

                case 'startUpload':
                    setState('uploading');
                    break;

                case 'stopUpload':
                    setState('paused');
                    break;

            }
        });
        uploader.onError = function (code) {
            errmsg('错误', "可能已经存在 错误代码：" + code);
        };
        //这是啥。。。
        // uploader.creatFromData = function (file, data, callback) {
        //     var posturl = '/merchant/businesscode/save.html?type=img';
        //     var xhr = getXhr();

        //     if (file.url) { //已经解码 直接上传地址
        //         data.act = upType;
        //         data.code = signCode;
        //         data.url = file.url;
        //         var form = '';
        //         for (var k in data) {
        //             if (form != '') form += '&';

        //             form += k + '=' + encodeURIComponent(data[k]);


        //         }
        //         posturl = '/merchant/businesscode/save.html?type=url';
        //     } else {
        //         var base64 = file.base64.replace(/^data:image\/\w+;base64,/, "");
        //         var binaryImg = atob(base64);
        //         var arraybuffer = new ArrayBuffer(binaryImg.length);
        //         var uint8 = new Uint8Array(arraybuffer);
        //         for (var i = 0; i < uint8.length; i++) {
        //             uint8[i] = binaryImg.charCodeAt(i);
        //         }
        //         var blob = new Blob([arraybuffer]);
        //         var form = new FormData();
        //         form.append("act", upType);
        //         form.append("code", signCode);
        //         form.append("id", data.id);
        //         form.append("tag", data.tag || 0);
        //         form.append("money", data.money);
        //         form.append("url", file.url || '');
        //         form.append("img", blob);
        //     }

        //     xhr.setTimeout = setTimeout(function () {
        //         callback(true, 504)
        //     }, 60000)
        //     xhr.onreadystatechange = function () {
        //         if (xhr.readyState == 4) {
        //             clearTimeout(xhr.setTimeout);
        //             if (xhr.status == 200) {
        //                 var data = JSON.parse(xhr.response);

        //                 callback(false, data);
        //             } else {
        //                 callback(true, xhr.status)
        //             }

        //         }
        //     };
        //     xhr.open("post", posturl);//这是以post方式请求数据
        //     if (file.url) {
        //         xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        //     }

        //     xhr.send(form);
        // }

        function getXhr() {
            // 声明XMLHttpRequest对象
            var xhr = null;
            // 根据浏览器的不同情况进行创建
            if (window.XMLHttpRequest) {
                // 表示除IE外的其他浏览器
                xhr = new XMLHttpRequest();
            } else {
                // 表示IE浏览器
                xhr = new ActiveXObject('Microsoft.XMLHttp');
            }
            return xhr;
        }

        uploader.upQrcode = function (file, postData) {
            postData = !postData ? uploader.getData(file) : postData;
            file.setStatus('progress');
            $.ajax({
                timeout: 60000,
                url: '/uploads.html',
                type: "POST",
                dataType: 'json',
                data: 'act=' + upType + '&code=' + signCode + "&json_data=" + encodeURIComponent(postData),
                success: function (data) {
                    if (data) {
                        uploader.next(data, file)
                    } else {
                        uploader.next({status: '0', msg: '未知错误'}, file)
                    }
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    uploader.next({status: '0', msg: textStatus}, file)
                }
            })
        }
        uploader.getData = function (file, json) {
            var postJson = '';
            var backData = file.check();
            if (file.getStatus() == 'invalid') {
                file.showError('识别失败需更换二维码')
            } else if (!backData) {
                file.setStatus('error', 'noMoney');
                file.showError('未填写金额' + (upType == 1 ? '或备注' : '') + '已跳过')
            } else {
                if (json) return backData;
                var postTag = upType == 1 ? ',"tag":' + backData.tag : upType == 2 ? ',"data":"' + file.base64 + '"' : '';
                // if (upType != 2)  postTag += ',"url":"' + file.url + '"';
                postJson += '{"id":' + file.id.split('_')[2] + ',"money":' + backData.money + postTag + '},'
                file.hideError()
            }

            return postJson;
        }
        uploader.creatPostData = function () { //创建一些JSON数据POST到云端
            var postJson = '';
            $.each(uploader.getFiles(), function () {
                postJson += uploader.getData(this);
            })
            return postJson ? '{"type":' + upType + ',"json":[' + postJson.substring(0, postJson.length - 1) + ']}' : false;
        }
        uploader.next = function (data, file) { //获取下一个任务
            updateTotalProgress();
            if (typeof data === 'number') { //这是从第一个失败开始
                var up_files = uploader.getFiles('queued');
                if (up_files.length <= 0) { //任务完成 否则继续下一个
                    // setState('finish');
                    setState('confirm');
                    updateTotalProgress();
                } else {
                    var postData = uploader.getData(up_files[0], true);
                    if (!postData) {
                        up_files[0].setStatus('error', 'noMoney');
                        return uploader.next(0);
                    }
                    if (uploader.paused) return;
                    // postData= postData ? '{"type":' + upType + ',"json":[' + postData.substring(0, postData.length - 1) + ']}' : false;
                    uploader.creatFromData(up_files[0], postData, function (err, data) {
                        if (err) {
                            uploader.next({status: '0', msg: '存在错误'}, up_files[0])
                        } else if (data) {
                            uploader.next(data, up_files[0])
                        } else {
                            uploader.next({status: '0', msg: '未知错误'}, up_files[0])
                        }
                    }); //继续一下个
                }

            } else if (typeof data === 'object') { //服务器返回的JSON
                var status = parseInt(data.status);
                if (!status || status < 0) { //这是服务器返回了不可继续错误
                    return errmsg('拥有错误无法继续', data.msg)
                } else if (data.msg) {
                    file.setStatus('error', 'upError');
                    file.showError(data.msg);
                    uploader.next(0);
                } else { //这是成功
                    file.hideError();
                    file.setStatus('complete');
                    uploader.next(0);
                }
            } else {
                return errmsg('拥有错误无法继续')
            }
        }, orcMoney = function (file, callback) {
            getImgNumber(file, function (data) {
                console.log(file.id);
                file.orc = 1;
                if (data) {
                    var result = data.replace(/[ |_|.]/g, "").split('\n');
                    // if ($('#orc_money').is(':checked')) {
                        $('#' + file.id + ' .price').val((result[0] / 100).toFixed(2));
                    // }
                    // if (result[1] && $('#orc_tag').is(':checked')) {
                    //     $('#' + file.id + ' .tag').val(result[1]);
                    // }
                }
                callback(data);
            })
        }, autoOrc = function (oneThread) {
            try {
                if(!window.File|| !window.FileReader||!isCanvasSupported()) errmsg('错误','浏览器不支持此功能!');
            }catch (e){
                errmsg('错误','浏览器不支持此功能');
            }

            if (ThreadLock) return errmsg('有任务正在运行', '请停止或者等待完成或刷新页面');
            var files = uploader.getFiles('inited', 'error');
            var successCount = 0;
            ThreadLock = true;

            function checkOK() {
                if (successCount == files.length) {
                    $('.progress').hide();
                    $('.autoMoney').text('电脑识别');
                    $('.MobileautoMoney').text('手机识别');
                    ThreadLock = false;
                    if (files.length < 1) {
                        return errmsg('请添加二维码', '请先添加二维后使用');
                    } else {
                        layer.alert('识别完成,为了确保无误 请人工核对一遍');
                    }

                }
            }
            checkOK();
            $('.progress-bar').css('width', '1%');
            $('.progress').show();
            if (!oneThread) {
                $.each(files, function () {
                    var file = this;
                    if (file.orc) {
                        successCount++;
                        checkOK()
                    } else {
                        file.orc = 1;
                        orcMoney(file, function () {
                            successCount++;
                            $('.progress-bar').css('width', successCount / files.length * 100 + '%');
                            checkOK()
                        })
                    }
                })
            } else {
                function oneThread() {
                    for (var i = successCount; i < files.length; i++) {
                        if (stopThread) {
                            $('.progress').hide();
                            $('.MobileautoMoney').text('手机识别');
                            stopThread = false;
                            return;
                        }
                        if (files[successCount].orc) {
                            successCount++;
                            checkOK()
                        } else {
                            files[successCount].orc = 1;
                            $('.progress-bar').css('width', successCount / files.length * 100 + '%');
                            orcMoney(files[successCount], function () {
                                successCount++;
                                checkOK();
                                oneThread();
                            })
                            break;
                        }
                    }
                }

                oneThread();
            }
        }

        function getImgNumber(file, callback) { //识别图片中的数字 可能返回_ 空格 无小数点
            //首先根据canvas找到图片中需要获取的区域
            var canvas = $('#decode-canvas')[0], //画布
                ctx = canvas.getContext('2d'),
                reader = new FileReader(),imgDatas;
            reader.onload = function (e) {
                var img = new Image();
                var drawImg = function (x, y, width, height) {
                    canvas.width = width;
                    canvas.height = height;
                    ctx = canvas.getContext('2d')
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.scale(1, 1);//x和y方向的缩放比例
                    ctx.drawImage(img, x, y, width, height, 0, 0, canvas.width, canvas.height);
                }
                var ReDraw = function (scale) {
                    scale = scale || 2
                    canvas.width = img.width / scale;
                    canvas.height = img.height / scale;
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.scale(1 / scale, 1 / scale);//x和y方向的缩放比例
                    ctx.drawImage(img, 0, 0);
                }, isBlackWhite = function (data, x, y, width, threshold, to2) { //检查是黑还是白 真为黑 false为白
                    var p = x * 4 + y * width * 4;
                    threshold = threshold || 700;
                    if (data[p] <= (data[p + 1] + 10) && data[p] >= (data[p + 1] - 10) && data[p + 1] <= (data[p + 2] + 10) && data[p + 1] >= (data[p + 2] - 10) && (data[p] + data[p + 1] + data[p + 2]) < threshold) { //这是黑色
                        to2 ? data[p + 2] = data[p + 1] = data[p] = 0 : '';
                        return true;
                    } else { //这是白色
                        to2 ? data[p + 2] = data[p + 1] = data[p] = 255 : '';
                        return false;
                    }
                }, toBack = function (imgData, positionData) { //转为黑白
                    var maxX = positionData.x + positionData.width, maxY = positionData.y + positionData.height;
                    for (var y = positionData.y; y < maxY; y++) { //从左边到右边查找第一次出现黑色的位置
                        for (var x = positionData.x; x < maxX; x++) {
                            isBlackWhite(imgData.data || imgData, x, y, imgData.width || canvas.width, positionData.threshold, true)
                        }
                    }
                }, findLine = function (imgData, positionData, to2) { //寻找出每行的坐标 用于分割 如果3行则第2行为金额。第三行为备注 如果2行则取最高那行为金额 下面为备注
                    var list = [];
                    var saveY = -2;
                    var nowI = 0;
                    var to2 = to2 || positionData.to2;
                    var maxX = positionData.x + positionData.width, maxY = positionData.y + positionData.height;
                    for (var y = positionData.y; y < maxY; y++) { //从左边到右边查找第一次出现黑色的位置
                        for (var x = positionData.x; x < maxX; x++) {
                            if (isBlackWhite(imgData, x, y, canvas.width, 700, to2)) { //为黑色
                                if (!list[nowI]) {
                                    list[nowI] = {startX: x, startY: y, stopX: x, stopY: y};//新记录
                                } else {
                                    if (x < list[nowI].startX) list[nowI].startX = x; //如果发现了最小的X坐标则使用最小的X坐标
                                    if (x > list[nowI].stopX) list[nowI].stopX = x; //保存最大的X坐标
                                }
                                saveY = y
                            } else if (x == (maxX - 1) && saveY == (y - 1)) { //白色找到了最后也没找到  表示字体结束了 保存上一个字体数据
                                list[nowI].stopY = y - 1;//保存上一个字体的停止Y坐标
                                list[nowI].height = list[nowI].stopY - list[nowI].startY;
                                list[nowI].width = list[nowI].stopX - list[nowI].startX;
                                nowI++; //换一行
                            }
                        }
                    }
                    return list;
                    // || [{
                    //     startX: x,
                    //     startY: y,
                    //     stopX: maxX,
                    //     stopY: maxY,
                    //     height: positionData.height,
                    //     width: positionData.width
                    // }];

                }, findFirstWhite = function (data, x, y, maxI, up) { //查找第一个白色
                    var saveY = y;
                    while (maxI > 0) {
                        maxI--;
                        y = y + up
                        if (getMyRGB(data, x, y, canvas.width, 1) > 710) {
                            return y;
                        }
                    }
                    return saveY; //没找到
                }, findMaxHeight = function (lines) {
                    var lineHeight = 0;
                    var lineIndex = 0;
                    for (var k in lines) {
                        if (lines[k].height > lineHeight) {
                            lineHeight = lines[k].height; //保存最大高的那行
                            lineIndex = k;  //保存下标
                        }
                    }
                    return lineIndex;
                }, drawImgFromData = function (c) { //从数据中绘图
                    canvas.width = c.width;
                    canvas.height = c.height;
                    ctx.putImageData(c, 0, 0);
                }, findWhite = function (up) {
                  //  var imgDatas = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    var imgData = imgDatas.data;
                    var x = file.x * (file.scale || 1) / 2; //得到缩放后的X坐标
                    var startY = file.y * (file.scale || 1) / 2; //得到缩放后的开始Y坐标

                    if (up) {
                        startY = findFirstWhite(imgData, x, startY, startY, -1);
                        for (var y = startY; y > 0; y--) { //从缩放后的Y坐标开始向上找
                            if (!getMyRGB(imgData, x, y, canvas.width, 0)) { //找到了其他颜色停止
                                //开始分割出有效部分
                                var positionData = {
                                    x: x,
                                    y: (y - 1),
                                    width: file.scaleWidth * file.scale / 2,
                                    height: startY - y,
                                    to2: true
                                }
                                var lines = findLine(imgData, positionData); //每行的参数
                                if (lines.length < 1) return callback('');
                                var moneyParam = lines[findMaxHeight(lines)]; //找到金额的行
                                drawImg(moneyParam.startX * 2, moneyParam.startY * 2, moneyParam.width * 2, moneyParam.height * 2); //开始绘图
                                break;
                            }
                        }
                    } else { //往下找非白色区域
                        var startY = startY + (file.scaleWidth * file.scale / 2); //得到缩放后的开始Y坐标
                        startY = findFirstWhite(imgData, x, startY, canvas.height - startY, +1);
                        for (var y = startY; y < canvas.height; y++) {
                            if (!getMyRGB(imgData, x, y, canvas.width, 0)) { //非灰白黑则停止
                                //从Y坐标开始位置加上 真实二维码高 为真实截取开始的Y坐标
                                var positionData = {
                                    x: x,
                                    y: startY,
                                    width: file.scaleWidth * file.scale / 2,
                                    height: y - 1 - startY,
                                    to2: true
                                }
                                var lines = findLine(imgData, positionData); //每行的参数
                                if (lines.length < 1) return callback('');
                                var moneyIndex = 0;
                                if (lines.length >= 2 && lines[0].height == lines[1].height) { //发现第一个跟第2个为同样的行高则使用第2个为金额
                                    moneyIndex = 1; //找到金额的行
                                } else {
                                    moneyIndex = findMaxHeight(lines); //找到金额的行
                                }
                                var moneyParam = lines[moneyIndex];

                                if (upType == 1) { //支付宝 需要备注
                                    drawImg(x * 2, moneyParam.startY * 2, file.scaleWidth * file.scale, (y - 1) * 2 - startY * 2); //开始绘图
                                } else {
                                    drawImg(moneyParam.startX * 2, moneyParam.startY * 2, moneyParam.width * 2, moneyParam.height * 2); //开始绘图
                                }
                                var newImg = ctx.getImageData(0, 0, canvas.width, canvas.height); //获取需要的数据
                                toBack(newImg, {
                                    x: 0,
                                    y: 0,
                                    width: newImg.width,
                                    height: newImg.height,
                                    threshold: upType == 2 ? 5 : 700
                                }); //转为黑白
                                drawImgFromData(newImg); //绘制黑白图片到画布
                                break;
                            }
                        }
                    }
                    imgData=null;
                    imgDatas=null;
                    OCRAD(canvas, {
                        numeric: true
                    }, callback)
                }
                img.onload = function () { //如果图片加载则开始得到图片中的白色区域
                    if(file.imgWidth){
                        canvas.width = file.imgWidth;
                        canvas.height = file.imgHeight;
                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                        imgDatas=ctx.getImageData(0, 0, canvas.width, canvas.height);
                    }else{
                        ReDraw(2);
                        imgDatas=ctx.getImageData(0, 0, canvas.width, canvas.height);
                        var findQr=findQrcode({
                            type: 'findQrcode',
                            x: 10,
                            y: 10,
                            nextX: 4,
                            scale: 2,
                            imageData: imgDatas,
                            width: canvas.width,
                            height: canvas.height
                        });
                        if(!findQr.error){
                            file.x=findQr.x,file.y=findQr.y,file.scaleWidth=findQr.width,file.scale=findQr.scale;
                        }else{
                            return callback('');
                        }
                    }
                    if (((file.y + (file.scaleWidth / 2)) - (canvas.height / file.scale / 2)) > 0) { //二维码偏低则往上截取白色区域
                        findWhite(1);
                    } else { //往下截取
                        findWhite(0);
                    }

                }
                img.src = "data:application/octet-stream;" + e.target.result.substr(e.target.result.indexOf("base64,"));
            };
            file && reader.readAsDataURL(file.source.source);
        }

        $('#removeAll').on("click", function (obj) {
            if (confirm('确定要全部清空吗?')) {
                var files = uploader.getFiles();
                for (var i in files) {
                    uploader.removeFile(files[i], true);
                }
                fileCount = 0, fileSize = 0;
            }
        });
        $('#removeFaild').on("click", function (obj) {
            $.each(uploader.getFiles('invalid'), function () {
                uploader.removeFile(this, true);
                delete  this;
            })

            $.each(uploader.getFiles('error'), function () {
                uploader.removeFile(this, true);
                delete  this;
            })

        });
        $('.autoMoney').on('click', function () {
            if ($('.autoMoney').text() == '电脑识别') {
                $('.autoMoney').text('停止识别');
                autoOrc();
            } else {
                ThreadLock = false;
                return $('.autoMoney').text('电脑识别');
            }
        });
        $('.MobileautoMoney').on('click', function () {
            if ($('.MobileautoMoney').text() == '手机识别') {
                $('.MobileautoMoney').text('停止识别');
                autoOrc(true);
            } else {
                ThreadLock = false;
                stopThread = true;
                return $('.MobileautoMoney').text('手机识别');
            }
        });
        $upload.on('click', function () {
            
            if($('#product_id').val() == ''){
                layer.alert('请填写金额区间，如10元填：10');
                $('#product_id')focus();
                return false;
            }
            if ($(this).hasClass('disabled')) {
                return false;
            }
            if (state === 'confirm') {
                uploader.upload();
            } else if (state === 'ready') {
                uploader.upload();
            } else if (state === 'paused') {
                uploader.upload();
            } else if (state === 'uploading') {
                uploader.stop();
            }
        });

        $info.on('click', '.retry', function () {
            uploader.upload();
        });

        $info.on('click', '.ignore', function () {
            $.each(uploader.getFiles('error'), function () {
                this.setStatus('cancelled')
            })
        });

        $upload.addClass('state-' + state);
        updateTotalProgress();

    });

})(jQuery);
</script>
<style>
  #container {
    color: #838383;
    font-size: 12px;
}

#uploader .queueList {
    margin: 20px;
    border: 3px dashed #e6e6e6;
}
#uploader .queueList.filled {
    padding: 17px;
    margin: 0;
    border: 3px dashed transparent;
}
#uploader .queueList.webuploader-dnd-over {
    border: 3px dashed #999999;
}

#uploader p {margin: 0;}

.element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}

#uploader .placeholder {
    min-height: 350px;
    padding-top: 178px;
    text-align: center;
    background: url(mabi/img/image.png) center 93px no-repeat;
    color: #cccccc;
    font-size: 18px;
    position: relative;
}

#uploader .placeholder .webuploader-pick {
    font-size: 18px;
    background: #00b7ee;
    border-radius: 3px;
    line-height: 44px;
    padding: 0 30px;
    *width: 120px;
    color: #fff;
    display: inline-block;
    margin: 0 auto 20px auto;
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

#uploader .placeholder .webuploader-pick-hover {
    background: #00a2d4;
}

#uploader .placeholder .flashTip {
    color: #666666;
    font-size: 12px;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 20px;
}
#uploader .placeholder .flashTip a {
    color: #0785d1;
    text-decoration: none;
}
#uploader .placeholder .flashTip a:hover {
    text-decoration: underline;
}

#uploader .filelist {
    list-style: none;
    margin: 0;
    padding: 0;
}

#uploader .filelist:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    clear: both;
}

#uploader .filelist li {
    width: 210px;
    height: 310px;
    background: url(mabi/css/bg.png) no-repeat;
    text-align: center;
    margin: 0 8px 20px 0;
    position: relative;
    display: inline;
    float: left;
    overflow: hidden;
    font-size: 12px;
}

#uploader .filelist li p.log {
    position: relative;
    top: -45px;
}

#uploader .filelist li p.title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow : ellipsis;
    top: 5px;
    text-indent: 5px;
    text-align: left;
}

#uploader .filelist li p.progress {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 8px;
    overflow: hidden;
    z-index: 50;
    margin: 0;
    border-radius: 0;
    background: none;
    -webkit-box-shadow: 0 0 0;
}
#uploader .filelist li p.progress span {
    display: none;
    overflow: hidden;
    width: 0;
    height: 100%;
    background: #1483d8 url(mabi/css/progress.png) repeat-x;

    -webit-transition: width 200ms linear;
    -moz-transition: width 200ms linear;
    -o-transition: width 200ms linear;
    -ms-transition: width 200ms linear;
    transition: width 200ms linear;

    -webkit-animation: progressmove 2s linear infinite;
    -moz-animation: progressmove 2s linear infinite;
    -o-animation: progressmove 2s linear infinite;
    -ms-animation: progressmove 2s linear infinite;
    animation: progressmove 2s linear infinite;

    -webkit-transform: translateZ(0);
}

@-webkit-keyframes progressmove {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 17px 0;
    }
}
@-moz-keyframes progressmove {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 17px 0;
    }
}
@keyframes progressmove {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 17px 0;
    }
}

#uploader .filelist li p.imgWrap {
    position: relative;
    z-index: 2;
    line-height: 310px;
    vertical-align: middle;
    overflow: hidden;
    width: 210px;
    height: 310px;

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webit-transition: 200ms ease-out;
    -moz-transition: 200ms ease-out;
    -o-transition: 200ms ease-out;
    -ms-transition: 200ms ease-out;
    transition: 200ms ease-out;
}

#uploader .filelist li img {
    width: 100%;
}

#uploader .filelist li p.error {
    background: #f43838;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 28px;
    line-height: 28px;
    width: 100%;
    z-index: 100;
}

#uploader .filelist li .success {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 40px;
    width: 100%;
    z-index: 200;
    background: url(mabi/css/success.png) no-repeat right bottom;
}

#uploader .filelist div.file-panel {
    position: absolute;
    height: 0;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0;
    background: rgba( 0, 0, 0, 0.5 );
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 300;
}

#uploader .filelist div.file-panel span {
    width: 24px;
    height: 24px;
    display: inline;
    float: right;
    text-indent: -9999px;
    overflow: hidden;
    background: url(mabi/css/icons.png) no-repeat;
    margin: 5px 1px 1px;
    cursor: pointer;
}

#uploader .filelist div.file-panel span.rotateLeft {
    background-position: 0 -24px;
}
#uploader .filelist div.file-panel span.rotateLeft:hover {
    background-position: 0 0;
}

#uploader .filelist div.file-panel span.rotateRight {
    background-position: -24px -24px;
}
#uploader .filelist div.file-panel span.rotateRight:hover {
    background-position: -24px 0;
}

#uploader .filelist div.file-panel span.cancel {
    background-position: -48px -24px;
}
#uploader .filelist div.file-panel span.cancel:hover {
    background-position: -48px 0;
}

#uploader .statusBar {
    height: 63px;
    border-top: 1px solid #dadada;
    padding: 0 20px;
    line-height: 63px;
    vertical-align: middle;
    position: relative;
}

#uploader .statusBar .progress {
    border: 1px solid #1483d8;
    width: 198px;
    background: #fff;
    height: 18px;
    position: relative;
    display: inline-block;
    text-align: center;
    line-height: 20px;
    color: #6dbfff;
    position: relative;
    margin: 0 10px 0 0;
}
#uploader .statusBar .progress span.percentage {
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    background: #1483d8;
    position: absolute;
}
#uploader .statusBar .progress span.text {
    position: relative;
    z-index: 10;
}

#uploader .statusBar .info {
    display: inline-block;
    font-size: 14px;
    color: #666666;
}

#uploader .statusBar .btns {
    position: absolute;
    top: 10px;
    right: 20px;
    line-height: 40px;
}

#filePicker2 {
    display: inline-block;
    float: left;
}

#uploader .statusBar .btns .webuploader-pick,
#uploader .statusBar .btns .uploadBtn,
#uploader .statusBar .btns .uploadBtn.state-uploading,
#uploader .statusBar .btns .uploadBtn.state-paused {
    background: #ffffff;
    border: 1px solid #cfcfcf;
    color: #565656;
    padding: 0 18px;
    display: inline-block;
    border-radius: 3px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
    float: left;
}
#uploader .statusBar .btns .webuploader-pick-hover,
#uploader .statusBar .btns .uploadBtn:hover,
#uploader .statusBar .btns .uploadBtn.state-uploading:hover,
#uploader .statusBar .btns .uploadBtn.state-paused:hover {
    background: #f0f0f0;
}

#uploader .statusBar .btns .uploadBtn {
    background: #00b7ee;
    color: #fff;
    border-color: transparent;
}
#uploader .statusBar .btns .uploadBtn:hover {
    background: #00a2d4;
}

#uploader .statusBar .btns .uploadBtn.disabled {
    pointer-events: none;
    opacity: 0.6;
}
#uploader .filelist li p.error2 {
    background: rgba(12, 12, 12, 0.56);
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    height: 28px;
    line-height: 28px;
    width: 100%;
    z-index: 100;
}
#uploader .filelist li p.money {
    background: #ffffff;
    color: #ff1107;
    position: absolute;
    bottom: 0px;
    left: 0;
    height: 24px;
    line-height: 22px;
    width: 100%;
    z-index: 100;
}
</style>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 2.3.8
    </div>
    <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
    reserved.
  </footer>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
      <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
      <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <!-- Home tab content -->
      <div class="tab-pane" id="control-sidebar-home-tab">
        <h3 class="control-sidebar-heading">Recent Activity</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-birthday-cake bg-red"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

                <p>Will be 23 on April 24th</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-user bg-yellow"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>

                <p>New phone +1(800)555-1234</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>

                <p>nora@example.com</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-file-code-o bg-green"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>

                <p>Execution time 5 seconds</p>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

        <h3 class="control-sidebar-heading">Tasks Progress</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Custom Template Design
                <span class="label label-danger pull-right">70%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Update Resume
                <span class="label label-success pull-right">95%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-success" style="width: 95%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Laravel Integration
                <span class="label label-warning pull-right">50%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Back End Framework
                <span class="label label-primary pull-right">68%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

      </div>
      <!-- /.tab-pane -->
      <!-- Stats tab content -->
      <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
      <!-- /.tab-pane -->
      <!-- Settings tab content -->
      <div class="tab-pane" id="control-sidebar-settings-tab">
        <form method="post">
          <h3 class="control-sidebar-heading">General Settings</h3>

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Report panel usage
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
              Some information about this general settings option
            </p>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Allow mail redirect
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
              Other sets of options are available
            </p>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Expose author name in posts
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
              Allow the user to show his name in blog posts
            </p>
          </div>
          <!-- /.form-group -->

          <h3 class="control-sidebar-heading">Chat Settings</h3>

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Show me as online
              <input type="checkbox" class="pull-right" checked>
            </label>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Turn off notifications
              <input type="checkbox" class="pull-right">
            </label>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Delete chat history
              <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
            </label>
          </div>
          <!-- /.form-group -->
        </form>
      </div>
      <!-- /.tab-pane -->
    </div>
  </aside>
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->


<!-- Bootstrap 3.3.6 -->
<script src="{$site_url}/game/payx/mabi/js/bootstrap.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{$site_url}/game/payx/mabi/js/jquery-ui.min.js"></script>
<!-- Slimscroll -->
<script src="{$site_url}/game/payx/mabi/js/jquery.slimscroll.min.js"></script>
<script src="{$site_url}/game/payx/mabi/js/icheck.min.js"></script>

<!-- FastClick -->
<script src="{$site_url}/game/payx/mabi/js/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="{$site_url}/game/payx/mabi/js/app.min.js"></script>
<!-- 弹出js -->
<script src="{$site_url}/game/payx/mabi/js/bootbox.min.js"></script>
<script src="{$site_url}/game/payx/mabi/js/commond.js"></script>


<script type="text/javascript">
  $(function () {


  $('input[type="checkbox"].minimal').iCheck({
      checkboxClass: 'icheckbox_minimal-blue',
      radioClass: 'iradio_minimal-blue'
    });
});


</script>

</body>
</html>
